<template>
  <div style="height: auto">
    <!-- 头部搜索 -->
    <el-card
      style="width: 100%; margin-bottom: 10px; --el-card-padding: 10px"
      shadow="never"
    >
      <el-row :gutter="10">
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-input
            v-model="username"
            style="width: 35%"
            placeholder="请输入用户名"
          >
          </el-input>
        </el-col>
        <el-col
          style="display: flex; justify-content: flex-end; align-items: center"
          :xs="12"
          :sm="12"
          :md="12"
          :lg="12"
          :xl="12"
        >
          <el-space :size="20">
            <el-button type="primary" plain size="small">搜索</el-button>
            <el-button type="danger" plain size="small">重置</el-button>
            <el-button
              type="success"
              size="small"
              :icon="CirclePlus"
              @click="handleAdd"
              >添加</el-button
            >
            <CirclePlus></CirclePlus> <Search></Search>
          </el-space>
        </el-col>
      </el-row>
    </el-card>

    <el-table
      :data="menuData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
    >
      <el-table-column prop="label" label="名称">
        <template #default="scope">
          {{ scope.row.label }}
        </template>
      </el-table-column>
      <el-table-column prop="button" label="权限值" />

      <el-table-column prop="icon" label="权限值" />
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button
            v-if="scope.row.type !== 2"
            type="primary"
            size="small"
            :icon="CirclePlus"
            @click="handleTabAdd(scope.row)"
            >添加下级</el-button
          ></template
        >
      </el-table-column>
    </el-table>

    <div>
      <el-dialog
        style="border-radius: 5px"
        v-model="isDialog"
        align-center
        :show-close="false"
        title="新增菜单"
        :width="500"
        draggable
        @close="dialogClose"
      >
        <div style="margin-top: 10px">
          <el-form label-position="left" ref="forms" :model="form">
            <el-form-item label="菜单名称" :label-width="80" prop="title">
              <el-input v-model="form.title" />
            </el-form-item>
            <el-form-item label="name" :label-width="80" prop="name">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="路由名" :label-width="80" prop="path">
              <el-input v-model="form.path" />
            </el-form-item>
            <el-form-item label="组件路径" :label-width="80" prop="component">
              <el-input v-model="form.component" />
            </el-form-item>

            <el-form-item label="类型" :label-width="80" prop="type">
              <el-radio-group v-model="form.type">
                <el-radio :value="0">目录</el-radio>
                <el-radio :value="1">菜单</el-radio>
                <el-radio :value="2">按钮</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="权限值" :label-width="80">
              <el-input v-model="form.button" autocomplete="off" />
            </el-form-item>
            <el-form-item label="图标" :label-width="80">
              <el-input v-model="form.icon" autocomplete="off" />
            </el-form-item>

            <el-form-item label="排序" :label-width="80">
              <el-input v-model="form.sort" autocomplete="off" />
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogClose" size="small">取消</el-button>
            <el-button type="primary" size="small" @click="saveRole">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import { queryMenuList, queryRoleMenu, save } from "@/api/menu";
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";

// 这里的类型在使用的时候需要注意
const ruleFormRef = ref<FormInstance>();

//菜单展示数据
const menuData = ref([]);

//新增用户弹框
const isDialog = ref(false);

const form = ref({
  name: "", //路由名
  parentId: 0, //父级id
  path: "", //路由路径
  button: "", //权限值
  title: "", //菜单名称
  hidden: false, //是否隐藏
  type: null, //类型 0菜单 1按钮
  icon: "", //图标
  sort: null, //排序
  status: null, //状态 0禁用 1启用
});

onMounted(() => {
  getAllMenuData();
});

const dialogClose = () => {
  console.log("关闭");
  isDialog.value = false;
};

//获取菜单数据 抽屉树形数据
const getAllMenuData = () => {
  queryMenuList().then((res) => {
    if (res.code === 200) {
      menuData.value = res.data;
    }
  });
};

// const saveRole = async (formEl) => {
//   if (!formEl) return;
//   await formEl.validate((valid) => {
//     if (valid) {
//       console.log("submit!");
//     } else {
//       console.log("error submit!");
//     }
//   });
// };

const saveRole = () => {
  save(form.value).then((res) => {
    if (res.code === 200) {
      ElMessage({
        message: "新增角色成功",
        type: "success",
      });
      isDialog.value = false;
      getAllMenuData();
    }
  });
};

const handleAdd = () => {
  isDialog.value = true;
};
const handleTabAdd = (e) => {
  form.value.parentId = e.id;
  isDialog.value = true;
  console.log(form.value);
};
</script>
<style scoped>
</style>